<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>会员信息管理`</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link href="./static/assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/assets/libs/css/style.css">

    <link rel="stylesheet" href="/static/assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/vendor/datatables/css/dataTables.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/vendor/datatables/css/buttons.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/vendor/datatables/css/select.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/vendor/datatales/css/fixedHeader.bootstrap4.css">
    <link rel="stylesheet" href="/static/css/modals.css">
</head>

<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<div class="dashboard-main-wrapper" id="vipTable">
    <!--注册模态框-->
    <div class="modal fade" tabindex="-1" aria-hidden="true" id="selectOne">
        <div class="modal-dialog" role="document">
            <div class="modal-content rounded-5 shadow">
                <div class="modal-header p-5 pb-4 border-bottom-0">
                    <!-- <h5 class="modal-title">Modal title</h5> -->
                    <h2 class="fw-bold mb-0">编辑用户</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body p-5 pt-0">
                    <form class="">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control rounded-4"v-model="oneOfVip.u_id"  id="update_uid" readonly="readonly">
                            <label for="update_uid">会员ID</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control rounded-4"v-model="oneOfVip.u_name"  id="update_name">
                            <label for="update_name">会员姓名</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control rounded-4"v-model="oneOfVip.u_card" id="update_card">
                            <label for="update_card">会员身份证号</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control rounded-4"v-model="oneOfVip.u_username"  id="update_username">
                            <label for="update_username">会员名称</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control rounded-4"v-model="oneOfVip.u_telephone" id="update_tel">
                            <label for="update_tel">会员电话</label>
                        </div>
                        <div class="form-floating mb-3">
                            <select class="form-select"  id="update_type" v-on:input="disabledTeamName()" v-model="oneOfVip.u_type" aria-label="Floating label select example">
                                <option selected>请选择</option>
                                <option value="0">团体用户</option>
                                <option value="1">个人用户</option>
                            </select>
                            <label for="update_type">用户类型</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text"   class="form-control rounded-4"v-model="oneOfVip.u_teamname" id="update_teamname">
                            <label for="update_teamname">团体名称</label>
                        </div>
                        <!--class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"-->
                        <input type="button" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary"  v-on:click="editorVip()" value="确认编辑" >
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- wrapper  -->
    <!-- ============================================================== -->
    <div class="container-fluid  dashboard-content">
        <div style="margin-top:-60px">
            <a class="navbar-brand" href="javascript:0;">Search</a>
            <div class="form-floating mb-3">
                <input type="text"  class="form-control rounded-4" v-model="searchCode" style="width:300px"   id="search_card" v-on:input="searchVip()">
                <label for="update_tel">聚合查询</label><br/>
<!--                <button type="button" class="btn btn-outline-success" @click="editorVip()">添加会员</button>-->

            </div>



        </div>
        <!-- ============================================================== -->
        <!-- pageheader -->
        <!-- ============================================================== -->
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="page-header">
                    <h2 class="pageheader-title">会员管理</h2>
                    <p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.</p>
                    <input type="button" class="btn btn-outline-success" @click="openModal()" value="添加会员">
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- end pageheader -->
        <!-- ============================================================== -->
        <div class="row">
            <!-- ============================================================== -->
            <!-- basic table  -->
            <!-- ============================================================== -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <h5 class="card-header">会员信息管理</h5>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered first">
                                <thead>
                                <tr>
                                    <th>会员编号</th>
                                    <th>会员姓名</th>
                                    <th>会员身份证</th>
                                    <th>会员用户名</th>
                                    <th>会员手机号</th>
                                    <th>会员类型</th>
                                    <th>团体名称</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in vip">
                                    <td>{{item.u_id}}</td>
                                    <td>{{item.u_name}}</td>
                                    <td>{{item.u_card}}</td>
                                    <td>{{item.u_username}}</td>
                                    <td>{{item.u_telephone}}</td>
                                    <td v-if="item.u_type==1">个人用户</td>
                                    <td v-if="item.u_type==0">团体用户</td>
                                    <td>{{item.u_teamname}}</td>
                                    <td>
                                        <button type="button" class="btn btn-outline-secondary" v-on:click="selectOne(item.u_id)">修改</button>
                                        <button type="button" class="btn btn-outline-danger" v-on:click="deleteVip(item.u_id)">删除</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- end basic table  -->
            <!-- ============================================================== -->
        </div>
    </div>
<!-- ============================================================== -->
<!-- end main wrapper -->
 <!-- Optional JavaScript -->
<script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="static/js/bootstrap.js"></script>
<script src="/static/assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<script src="/static/js/vue.js"></script>
</div>
</body>

</html>

<script>
    var v = new Vue({
        el:'#vipTable',
        data:{
            vip:[{
                u_id:'',
                u_card:'',
                u_name:'',
                u_username:'',
                u_telephone:'',
                u_type:'',
                u_teamname:''
            }],
            oneOfVip:{
                u_id:'',
                u_card:'',
                u_name:'',
                u_username:'',
                u_telephone:'',
                u_type:'',
                u_teamname:''
            },
            searchCode:''
        },
        methods:{
            selectAllVip:function (){
                $.ajax({
                    url:'/vip/selectAll',
                    type:'post',
                    dataType:'json',
                    success:function (res){
                        debugger;
                        if (res.data!=null){
                            v.vip = res.data;
                        }
                    }
                });
            },
            /*删除会员*/
            deleteVip:function (id){
                if (confirm("您确定要删除码?")){
                    $.ajax({
                        url:'/vip/delete',
                        data:{'id':id},
                        type:'post',
                        dataType: 'json',
                        success:function (res){
                            if (res.code===222){
                                alert('删除成功!');
                                v.selectAllVip();
                            }else{
                                alert('该用户不存在!');
                            }
                        }
                    });
                }

            },
            /*查询单个会员*/
            selectOne:function (id){
                $("#selectOne").modal("show");
                $.ajax({
                    url:'/vip/selectOne?id='+id,
                    // data:{'id':id},
                    dataType:'json',
                    type:'post',
                    success:function (res){
                        if (res.data != null){
                            v.oneOfVip=res.data;
                        }
                    }
                });
            },
            /*弹出模态框*/
            openModal:function (){
                v.oneOfVip.u_id=''
                v.oneOfVip.u_card=''
                v.oneOfVip.u_name=''
                v.oneOfVip.u_username=''
                v.oneOfVip.u_telephone=''
                v.oneOfVip.u_type=''
                v.oneOfVip.u_teamname=''
                $("#selectOne").modal("show");
            },
            /*增加修改会员*/
            editorVip:function (){
                $.ajax({
                    url:'/vip/editor',
                    type:'post',
                    contentType: 'application/json;charset=utf-8',
                    data:JSON.stringify(v.oneOfVip),
                    dataType:'json',
                    success:function (res){
                        debugger;
                        if (res.code==222){
                            alert("编辑成功!")
                            $('#selectOne').modal('hide');
                            v.selectAllVip();
                        }else{
                            alert("数据有误,请检查后再提交!")
                        }
                    },
                    error: function (er){
                        alert(er)
                    }
                });
            },
            /*搜索会员信息*/
            searchVip:function (){
               $.ajax({
                  url:'/vip/search',
                   type:'post',
                   data:{'code':v.searchCode},
                   dataType:'json',
                   success:function (res){
                      v.vip = res.data;
                   }
               });
            },
            /**/
            disabledTeamName:function (){
                if ('#update_type'.val == 1){
                    '#update_teamname'.style=''
                }
            }
        },
        mounted:function (){
            this.selectAllVip();
        }
    });
</script>